<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="概况统计" name="statistics">
      <!-- 成绩概况 -->
      <el-descriptions class="statistics" title="成绩概况" :column="5" border>
        <el-descriptions-item label="总分">{{ statistics.totalScore }}</el-descriptions-item>
        <el-descriptions-item label="及格分">{{ statistics.passScore }}</el-descriptions-item>
        <el-descriptions-item label="最高分">{{ statistics.highestScore }}</el-descriptions-item>
        <el-descriptions-item label="最低分">{{ statistics.lowestScore }}</el-descriptions-item>
        <el-descriptions-item label="平均分">{{ statistics.averageScore }}</el-descriptions-item>
        <el-descriptions-item label="应考人数">{{ statistics.userCount }}</el-descriptions-item>
        <el-descriptions-item label="实考人数">{{ statistics.examUserCount }}</el-descriptions-item>
        <el-descriptions-item label="缺考人数">{{ statistics.userCount - statistics.examUserCount }}</el-descriptions-item>
        <el-descriptions-item label="通过率">{{ statistics.passRate * 100 }}%</el-descriptions-item>
      </el-descriptions>
      <div style="height: 20px"></div>
      <exam-user :exam-type="props.examType" :exam-id="props.examId" :period-id="props.periodId" />
    </el-tab-pane>
    <el-tab-pane label="考生记录" name="record">
      <exam-user v-if="activeName === 'record'" :exam-type="props.examType" :exam-id="props.examId" :period-id="props.periodId" />
    </el-tab-pane>
    <el-tab-pane label="题目分析" name="analysis">
      <exam-analysis v-if="activeName === 'analysis'" :exam-type="props.examType" :exam-id="props.examId" :period-id="props.periodId" />
    </el-tab-pane>
    <el-tab-pane v-if="props.examType === 2" label="排行榜" name="rank">
      <exam-rank v-if="activeName === 'rank'" :exam-type="props.examType" :exam-id="props.examId" :period-id="props.periodId" />
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
  import { onMounted, ref } from 'vue'
  import { examApi } from '@/api/exam'
  import ExamUser from './ExamUser.vue'
  import ExamAnalysis from './ExamAnalysis.vue'
  import ExamRank from './ExamRank.vue'

  const props = defineProps({
    examType: { type: Number, default: 0 },
    examId: { type: String, default: '' },
    periodId: { type: String, default: '' }
  })

  onMounted(() => {
    // 统计概况
    handleStatistics()
  })

  // 统计概况
  const statistics = ref({})
  const handleStatistics = async () => {
    statistics.value = await examApi.examStatistics({ examType: props.examType, relateId: props.examType === 3 ? props.periodId : props.examId })
  }

  // 切换
  const activeName = ref('statistics')
  const handleClick = (target) => {
    activeName.value = target.props.name
  }
</script>
<style lang="scss" scoped>
  .statistics {
    :deep(.el-descriptions__title) {
      font-weight: normal;
    }
    :deep(.el-descriptions__cell) {
      font-weight: normal;
    }
  }
</style>
